

<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>报销补帖</el-breadcrumb-item>
      <el-breadcrumb-item>报销管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>出差报销申请</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div style="margin:40px 20px 20px 20px">
    <el-form :inline="true" ref="searchFormRef" :model="searchFormModel" class="demo-form-inline" style="margin-top: 20px">
      <el-form-item label="同行人" prop="memberName">
        <el-input v-model="searchFormModel.memberName" placeholder="请输入同行人" clearable />
      </el-form-item>
      <el-form-item label="审批状态" prop="state">
        <el-select v-model="searchFormModel.state" placeholder="请选择审批状态" clearable style="width: 150px">
          <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="searchOnSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!--  数据表格-->
  <div style="margin:20px">
    <el-table :data="blogInfo" stripe border style="width: 100%">
      <el-table-column label="同行人" align="center" prop="memberName" />
      <el-table-column label="出差申请单" align="center" prop="outApply" />
      <el-table-column label="出差开始日期" align="center" prop="outStart" width="180"/>
      <el-table-column label="出差结束日期" align="center" prop="outEnd" width="180"/>
      <el-table-column label="出差地点" align="center" prop="address" />
      <el-table-column label="开始日期" align="center" prop="startdate" width="180"/>
      <el-table-column label="结束日期" align="center" prop="enddate" width="180"/>
      <el-table-column label="车船费" align="center" prop="fare" />
      <el-table-column label="住宿费" align="center" prop="roomMoney" />
      <el-table-column label="途中补助费—天数" align="center" prop="travelDay" />
      <el-table-column label="途中补助费—金额" align="center" prop="travelMoney" />
      <el-table-column label="住勤费-地点" align="center" prop="roomAddress" />
      <el-table-column label="住勤费-天数" align="center" prop="roomDay" />
      <el-table-column label="住勤费—金额" align="center" prop="roomqMoney" />
      <el-table-column label="合计小写" align="center" prop="sumSmall" />
      <el-table-column label="总金额" align="center" prop="sumMoney" />
      <el-table-column label="总金额大写" align="center" prop="sumBig" />
      <el-table-column label="补助出差人数" align="center" prop="peopleNum" />
      <el-table-column label="出差是否全程开车" align="center" prop="isCar" />
      <el-table-column label="交通补助" align="center" prop="trafficAid" />
      <el-table-column label="伙食补助" align="center" prop="foodAid" />
      <el-table-column label="总消费金额" align="center" prop="sum" />
      <el-table-column label="证明人" align="center" prop="provePeople" />
      <!--      <el-table-column label="上传票据" align="center" prop="rill" width="100"/>-->
      <el-table-column label="上传票据" align="center" prop="rill" width="100">
        <template #default="scope">
          <div class="demo-image__preview">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.rill"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="scope.row.rill"
                :initial-index="4"
                fit="cover"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审批状态" align="center" prop="state">
        <template #default="scope">
          <span v-if="scope.row.state===0"><el-tag type="danger">已拒绝</el-tag></span>
          <span v-if="scope.row.state===1"><el-tag type="success">已通过</el-tag></span>
          <span v-if="scope.row.state===2"><el-tag type="danger">已驳回</el-tag></span>
          <span v-if="scope.row.state===3"><el-tag type="danger">已撤销</el-tag></span>
          <span v-if="scope.row.state===4"> <el-tag type="warning">审批中</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              @click="tableCheckHandler(scope.$index, scope.row)">
            <el-icon><DocumentChecked /></el-icon>审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3,5]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--  编辑模态框-->
  <el-dialog v-model="dialogEditState" title="修改出差报销申请" width="700">
    <div>
      <el-form ref="formEditRef" :model="formEdit" label-width="120px">
        <el-form-item label="同行人" prop="memberName">
          <el-input v-model="formEdit.memberName" placeholder="请输入同行人" />
        </el-form-item>
        <el-form-item label="出差申请单" prop="outApply">
          <el-input v-model="formEdit.outApply" placeholder="请输入出差申请单" />
        </el-form-item>
        <el-form-item label="出差开始日期" prop="outStart">
          <el-date-picker clearable
                          v-model="formEdit.outStart"
                          type="date"
                          value-format="YYYY-MM-DD"
                         >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出差结束日期" prop="outEnd">
          <el-date-picker clearable
                          v-model="formEdit.outEnd"
                          type="date"
                          value-format="YYYY-MM-DD"
                          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出差地点" prop="address">
          <el-input v-model="formEdit.address" placeholder="请输入出差地点" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startdate">
          <el-date-picker clearable
                          v-model="formEdit.startdate"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="enddate">
          <el-date-picker clearable
                          v-model="formEdit.enddate"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车船费" prop="fare">
          <el-input v-model="formEdit.fare" placeholder="请输入车船费" />
        </el-form-item>
        <el-form-item label="住宿费" prop="roomMoney">
          <el-input v-model="formEdit.roomMoney" placeholder="请输入住宿费" />
        </el-form-item>
        <el-form-item label="途中补助费—天数" prop="travelDay">
          <el-input v-model="formEdit.travelDay" placeholder="请输入途中补助费—天数" />
        </el-form-item>
        <el-form-item label="途中补助费—金额" prop="travelMoney">
          <el-input v-model="formEdit.travelMoney" placeholder="请输入途中补助费—金额" />
        </el-form-item>
        <el-form-item label="住勤费-地点" prop="roomAddress">
          <el-input v-model="formEdit.roomAddress" placeholder="请输入住勤费-地点" />
        </el-form-item>
        <el-form-item label="住勤费-天数" prop="roomDay">
          <el-input v-model="formEdit.roomDay" placeholder="请输入住勤费-天数" />
        </el-form-item>
        <el-form-item label="住勤费—金额" prop="roomqMoney">
          <el-input v-model="formEdit.roomqMoney" placeholder="请输入住勤费—金额" />
        </el-form-item>
        <el-form-item label="合计小写" prop="sumSmall">
          <el-input v-model="formEdit.sumSmall" placeholder="请输入合计小写" />
        </el-form-item>
        <el-form-item label="总金额" prop="sumMoney">
          <el-input v-model="formEdit.sumMoney" placeholder="请输入总金额" />
        </el-form-item>
        <el-form-item label="总金额大写" prop="sumBig">
          <el-input v-model="formEdit.sumBig" placeholder="请输入总金额大写" />
        </el-form-item>
        <el-form-item label="补助出差人数" prop="peopleNum">
          <el-input v-model="formEdit.peopleNum" placeholder="请输入补助出差人数" />
        </el-form-item>
        <!--        <el-form-item label="出差是否全程开车" prop="isCar">
                  <el-input v-model="form.isCar" placeholder="请输入出差是否全程开车" />
                </el-form-item>-->
        <el-form-item label="出差是否全程开车" prop="isCar">
          <el-select v-model="formEdit.isCar" placeholder="请选择审批状态" clearable style="width: 200px;">
            <el-option label="否" value="否"></el-option>
            <el-option label="是" value="是"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交通补助" prop="trafficAid">
          <el-input v-model="formEdit.trafficAid" placeholder="请输入交通补助" />
        </el-form-item>
        <el-form-item label="伙食补助" prop="foodAid">
          <el-input v-model="formEdit.foodAid" placeholder="请输入伙食补助" />
        </el-form-item>
        <el-form-item label="总消费金额" prop="sum">
          <el-input v-model="formEdit.sum" placeholder="请输入总消费金额" />
        </el-form-item>
        <el-form-item label="证明人" prop="provePeople">
          <el-input v-model="formEdit.provePeople" placeholder="请输入证明人" />
        </el-form-item>
        <el-form-item label="上传票据" prop="rill">
          <template #default="scope">
            <el-upload
                ref="uploadRef"
                :action="'http://localhost:9095/upload'"
                name="file"
                :show-file-list="false"
                :on-success="updateFiledUpload"
                :auto-upload="true"
                list-type="picture-card"
            >
              <img v-if="formEdit.rill" :src="formEdit.rill" class="avatar" style="width: 100px;height: 100px;border-radius: 5px"/>
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >更新</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogAddState" title="添加出差报销申请" width="680">
    <div>
      <el-form ref="formAddRef" :model="formAdd" label-width="120px">
        <el-form-item label="同行人" prop="memberName">
          <el-input v-model="formAdd.memberName" placeholder="请输入同行人" />
        </el-form-item>
        <el-form-item label="出差申请单" prop="outApply">
          <el-input v-model="formAdd.outApply" placeholder="请输入出差申请单" />
        </el-form-item>
        <el-form-item label="出差开始日期" prop="outStart">
          <el-date-picker
              v-model="formAdd.outStart"
              type="date"
              placeholder="请选择出差开始日期"
              value-format="YYYY-MM-DD"
              @change="formatDate1"
              />
        </el-form-item>
        <el-form-item label="出差结束日期" prop="outEnd">
          <el-date-picker
              v-model="formAdd.outEnd"
              type="date"
              placeholder="请选择出差结束日期"
              value-format="YYYY-MM-DD"
              @change="formatDate2"
             />
        </el-form-item>
        <el-form-item label="出差地点" prop="address">
          <el-input v-model="formAdd.address" placeholder="请输入出差地点" />
        </el-form-item>
        <el-form-item label="开始日期" prop="startdate">
          <el-date-picker
              v-model="formAdd.startdate"
              type="date"
              placeholder="请选择开始日期"
              value-format="YYYY-MM-DD"
              @change="formatDate3"
               />
        </el-form-item>
        <el-form-item label="结束日期" prop="enddate">
          <el-date-picker
              v-model="formAdd.enddate"
              type="date"
              placeholder="请选择结束日期"
              value-format="YYYY-MM-DD"
              @change="formatDate4"
             />
        </el-form-item>
        <el-form-item label="车船费" prop="fare">
          <el-input v-model="formAdd.fare" placeholder="请输入车船费" />
        </el-form-item>
        <el-form-item label="住宿费" prop="roomMoney">
          <el-input v-model="formAdd.roomMoney" placeholder="请输入住宿费" />
        </el-form-item>
        <el-form-item label="途中补助费—天数" prop="travelDay">
          <el-input v-model="formAdd.travelDay" placeholder="请输入途中补助费—天数" />
        </el-form-item>
        <el-form-item label="途中补助费—金额" prop="travelMoney">
          <el-input v-model="formAdd.travelMoney" placeholder="请输入途中补助费—金额" />
        </el-form-item>
        <el-form-item label="住勤费-地点" prop="roomAddress">
          <el-input v-model="formAdd.roomAddress" placeholder="请输入住勤费-地点" />
        </el-form-item>
        <el-form-item label="住勤费-天数" prop="roomDay">
          <el-input v-model="formAdd.roomDay" placeholder="请输入住勤费-天数" />
        </el-form-item>
        <el-form-item label="住勤费—金额" prop="roomqMoney">
          <el-input v-model="formAdd.roomqMoney" placeholder="请输入住勤费—金额" />
        </el-form-item>
        <el-form-item label="合计小写" prop="sumSmall">
          <el-input v-model="formAdd.sumSmall" placeholder="请输入合计小写" />
        </el-form-item>
        <el-form-item label="总金额" prop="sumMoney">
          <el-input v-model="formAdd.sumMoney" placeholder="请输入总金额" />
        </el-form-item>
        <el-form-item label="总金额大写" prop="sumBig">
          <el-input v-model="formAdd.sumBig" placeholder="请输入总金额大写" />
        </el-form-item>
        <el-form-item label="补助出差人数" prop="peopleNum">
          <el-input v-model="formAdd.peopleNum" placeholder="请输入补助出差人数" />
        </el-form-item>
        <!--        <el-form-item label="出差是否全程开车" prop="isCar">
                  <el-input v-model="form.isCar" placeholder="请输入出差是否全程开车" />
                </el-form-item>-->
        <el-form-item label="出差是否全程开车" prop="isCar">
          <el-select v-model="formAdd.isCar" placeholder="请选择是否开车" clearable style="width: 200px;">
            <el-option label="否" value="否"></el-option>
            <el-option label="是" value="是"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交通补助" prop="trafficAid">
          <el-input v-model="formAdd.trafficAid" placeholder="请输入交通补助" />
        </el-form-item>
        <el-form-item label="伙食补助" prop="foodAid">
          <el-input v-model="formAdd.foodAid" placeholder="请输入伙食补助" />
        </el-form-item>
        <el-form-item label="总消费金额" prop="sum">
          <el-input v-model="formAdd.sum" placeholder="请输入总消费金额" />
        </el-form-item>
        <el-form-item label="证明人" prop="provePeople">
          <el-input v-model="formAdd.provePeople" placeholder="请输入证明人" />
        </el-form-item>
        <el-form-item prop="rill" label="上传票据">
          <!--              <el-input v-model="formAdd.rill"></el-input>-->
          <el-upload
              :action="'http://localhost:9095/upload'"
              :on-success="handleFiledUpload"
              :auto-upload="true"
              list-type="picture">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary" @click="submitRegisterForm">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!--审批模态框-->
  <el-dialog v-model="dialogCheckState" title="请选择审批状态" width="700" >
    <div>
      <el-form ref="formCheckRef" :model="formCheck" label-width="120px">
        <el-form-item prop="state" label="审批状态">
          <template #default="scope">
            <div>
              <el-radio-group v-model="formCheck.state" :disabled="formCheck.state === 1 || formCheck.state === 0 || formCheck.state === 3">
                <el-radio value="1" size="large" border >通过</el-radio>
                <el-radio value="0" size="large" border >拒绝</el-radio>
                <el-radio value="2" size="large" border :disabled="formCheck.state === 2">驳回</el-radio>
              </el-radio-group>
            </div>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogCheckOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogCheckOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>

import {ArrowRight} from "@element-plus/icons-vue";
import {Delete, Edit, Plus,DocumentChecked} from "@element-plus/icons";
import {onMounted, reactive, ref} from "vue";
import request from "@/utils/reimburse";
import {ElMessage, ElMessageBox, UploadProps, UploadUserFile} from "element-plus";
import axios from "axios";

const  mallInfo=ref([])
onMounted(()=>{
  getOutmoneyApply();
})

//分页
const currentPage = ref(1)
const pageSize = ref(3)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);

const  blogInfo=ref([])
// 表格显示内容
const getOutmoneyApply = () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含ID参数
  };
  // 如果同行人不为空，则添加到查询参数中
  if (searchFormModel.memberName && searchFormModel.memberName.trim() !== '') {
    params.memberName = searchFormModel.memberName.trim();
  }
  // 如果审批状态不为空，则添加到查询参数中
  if (searchFormModel.state && searchFormModel.state.trim() !== '') {
    params.state = searchFormModel.state.trim();
  }
  request({
    url: '/outmoneyApply/outmoneyApplyList',
    method: 'get',
    params,
  }).then((req) => {
    console.log(req)
    if (200 == req.data.errorCode) {
      blogInfo.value = req.data.data.records.map(item => ({
        ...item,
      }));
      totals.value = req.data.data.total;
    }
  })
}
const handleCurrentChange = (page) => {
  currentPage.value = page
  getOutmoneyApply()
}
const handleSizeChange = (size) => {
  pageSize.value = size
  getOutmoneyApply()
}

//搜索
const searchFormRef=ref()
const searchFormModel=reactive({
  id:'',
  memberName:'',
  state:''
})

// 定义下拉框选项

const stateOptions = ref([
  {value: '', label: '全部'},
  { value: '0', label: '已拒绝' },
  { value: '1', label: '已通过' },
  { value: '2', label: '已驳回' },
  { value: '3', label: '已撤销' },
  { value: '4', label: '审批中' },
]);


const searchOnSubmit=()=>{
  getOutmoneyApply()
}

///////////////////编辑/////////////////////////
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.id = rowData.id
  formEdit.memberName = rowData.memberName
  formEdit.outApply = rowData.outApply
  formEdit.outStart = rowData.outStart
  formEdit.outEnd = rowData.outEnd
  formEdit.address = rowData.address
  formEdit.startdate = rowData.startdate
  formEdit.enddate = rowData.enddate
  formEdit.fare = rowData.fare
  formEdit.roomMoney = rowData.roomMoney
  formEdit.travelDay = rowData.travelMoney
  formEdit.travelMoney = rowData.travelMoney
  formEdit.roomAddress = rowData.roomAddress
  formEdit.roomDay = rowData.roomqMoney
  formEdit.roomqMoney = rowData.roomqMoney
  formEdit.sumSmall = rowData.sumSmall
  formEdit.sumMoney = rowData.sumMoney
  formEdit.sumBig = rowData.sumBig
  formEdit.peopleNum = rowData.peopleNum
  formEdit.isCar = rowData.isCar
  formEdit.trafficAid = rowData.trafficAid
  formEdit.foodAid = rowData.foodAid
  formEdit.sum = rowData.sum
  formEdit.provePeople = rowData.provePeople
  formEdit.rill = rowData.rill
  formEdit.state = rowData.state


  dialogEditState.value = true
}
// 新增表单引用
const formEditRef = ref()
const dialogEditState = ref(false)
const uploadRef = ref()
const imageUrl = ref('');
const updateFiledUpload=(res)=>{
  console.log("图片:"+res)
  imageUrl.value=res.date;
  formEdit.rill=res.data;
}
const dialogEditOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method:'PUT',
    url:'/outmoneyApply/update',
    data:JSON.stringify(formEdit),
    headers: {'content-type': 'application/json;charset=UTF-8'}
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getOutmoneyApply()
    }
  })
  dialogEditState.value = false
}
// 新增表单初始化数据
const formEditData = {
  id:'',
  memberName:'',
  outApply:'',
  outStart:'',
  outEnd:'',
  address:'',
  startdate:'',
  enddate:'',
  fare:'',
  roomMoney:'',
  travelDay:'',
  travelMoney:'',
  roomAddress:'',
  roomDay:'',
  roomqMoney:'',
  sumSmall:'',
  sumMoney:'',
  sumBig:'',
  peopleNum:'',
  isCar:'',
  trafficAid:'',
  foodAid:'',
  sum:'',
  provePeople:'',
  rill:'',
  state:''
}
const dialogEditOnReset = () => {
  formEdit.memberName=''
  formEdit.outApply=''
  formEdit.outStart=''
  formEdit.outEnd=''
  formEdit.address=''
  formEdit.startdate=''
  formEdit.enddate=''
  formEdit.fare=''
  formEdit.roomMoney=''
  formEdit.travelDay=''
  formEdit.travelMoney=''
  formEdit.roomAddress=''
  formEdit.roomDay=''
  formEdit.roomqMoney=''
  formEdit.sumSmall=''
  formEdit.sumMoney=''
  formEdit.sumBig=''
  formEdit.peopleNum=''
  formEdit.isCar=''
  formEdit.trafficAid=''
  formEdit.foodAid=''
  formEdit.sum=''
  formEdit.provePeople=''
  formEdit.rill=''
  formEdit.state=''
  // 关闭对话框
  dialogEditState.value=false;
}
// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})


///////////////////添加/////////////////////////
const dialogAddState = ref(false);
const formAddData = {
  memberName:'',
  outApply:'',
  outStart:'',
  outEnd:'',
  address:'',
  startdate:'',
  enddate:'',
  fare:'',
  roomMoney:'',
  travelDay:'',
  travelMoney:'',
  roomAddress:'',
  roomDay:'',
  roomqMoney:'',
  sumSmall:'',
  sumMoney:'',
  sumBig:'',
  peopleNum:'',
  isCar:'',
  trafficAid:'',
  foodAid:'',
  sum:'',
  provePeople:'',
  rill:'',
  state:''
};
const formAdd = reactive({...formAddData});
const addressFormRef = ref(null); // 创建一个ref引用form
// 时间
const formatDate1=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.outStart = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.outStart = `${year}-${month}-${day} `;
}
const formatDate2=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.outEnd = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.outEnd = `${year}-${month}-${day} `;
}
const formatDate3=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.startdate = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.startdate = `${year}-${month}-${day} `;
}
const formatDate4=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.enddate = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.enddate = `${year}-${month}-${day} `;
}

const handleFiledUpload=(res)=>{
  console.log("图片:"+res)
  if (res != null){
    formAdd.rill=res.data
  }else {
    formAdd.rill=''
  }
}

// 提交表单
function submitRegisterForm (){
  request({
    method:'post',
    url:'/outmoneyApply/add',
    params:formAdd,
 /*   headers:{'content-type' : "application/json;charset=UTF-8"},*/
    contentType: 'application/json;charset=UTF-8'
  }).then(req=>{
    ElMessage({
      type:'info',
      message:req.data.msg
    })
    if (200 == req.data.errorCode){
      Object.assign(formAdd,formAddData)
      getOutmoneyApply()
    }
  })
  dialogAddState.value=false;
}
//时间设置//
const formatDate=(value)=> {
  if (!value) {
    // 如果日期时间选择器的值为空，则不进行格式化
    formAdd.outStart = '';
    return;
  }
  // 将日期时间字符串转换为Date对象
  const date = new Date(value);
  // 获取年、月、日、小时、分钟和秒
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  // 组合成所需的格式
  formAdd.outStart = `${year}-${month}-${day} `;
}
const dialogAddOnReset = () => {
  formAdd.memberName=''
  formAdd.outApply=''
  formAdd.outStart=''
  formAdd.outEnd=''
  formAdd.address=''
  formAdd.startdate=''
  formAdd.enddate=''
  formAdd.fare=''
  formAdd.roomMoney=''
  formAdd.travelDay=''
  formAdd.travelMoney=''
  formAdd.roomAddress=''
  formAdd.roomDay=''
  formAdd.roomqMoney=''
  formAdd.sumSmall=''
  formAdd.sumMoney=''
  formAdd.sumBig=''
  formAdd.peopleNum=''
  formAdd.isCar=''
  formAdd.trafficAid=''
  formAdd.foodAid=''
  formAdd.sum=''
  formAdd.provePeople=''
  formAdd.rill=''
  formAdd.state=''
  // 关闭对话框
  dialogAddState.value=false;
}

///////////////////////审批/////////////////////////////////
const formCheckRef = ref()
const dialogCheckState = ref(false)

// 新增表单初始化数据
const formCheckData = {
  id:'',
  state:''
}
const tableCheckHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formCheck.id = rowData.id
  formCheck.state = rowData.state


  dialogCheckState.value = true
}
const dialogCheckOnReset = () => {
  formEdit.state=''
  // 关闭对话框
  dialogCheckState.value=false;
}
const dialogCheckOnSubmit = () => {
  // 数据提交到服务器
  // 服务器端返回成功 ：清空表单，关闭对话框，更新表格内容
  request({
    method:'PUT',
    url:'/outmoneyApply/update',
    data:JSON.stringify(formCheck),
    headers: {'content-type': 'application/json;charset=UTF-8'}
  }).then(req=>{
    ElMessage({
      type:'success',
      message:req.data.msg
    })
    if (200==req.data.errorCode){
      getOutmoneyApply()
    }
  })
  dialogCheckState.value = false
}

const formCheck = reactive({...formCheckData})
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>